<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>欢迎！</title>
    <!-- 主页内嵌的未加密文件 -->

    <!--图标样式-->
    <link rel="stylesheet" href="图标文件/font-awesome.min.css">

    <!-- 日期方面的css设置 -->
    <link rel="stylesheet" href="NoBackGroundMain链接文件/日期方面的css设置.css">

    <!-- 其他css设置 -->
    <link rel="stylesheet" href="NoBackGroundMain链接文件/其它css设置.css">

    <!-- 页面超链接内容的样式 -->
    <link rel="stylesheet" href="NoBackGroundMain链接文件/页面超链接内容的样式.css">

</head>

<body>
    <!-- 头部区域 -->
    <header>
        <div class="boxdate">
            <div class="firstDiv"></div>
            <div class="lastDiv"></div>
        </div>
        <h1>MY DUSTBIN</h1>
    </header>
    <!-- 主体区域 -->
    <div class="main">
        <aside id="left_box" class="left_box" style="text-align: center;">
            <nav>
                <hr size="3" width="auto">
                <a href="#new1" onclick="toggleBlocks('1')">
                    <h1 id="color1">HTML5课堂文件</h1>
                </a>
                <hr size="3" width="auto">
                <a href="#new2" onclick="toggleBlocks('2')">
                    <div class="fa fa-music"></div>
                    <h1 id="music" class="common">音乐</h1>
                </a>
                <hr size="3" width="auto">
                <a href="#new3" onclick="toggleBlocks('3')">
                    <h1 id="color3">有趣的网页</h1>
                </a>
                <hr size="3" width="auto">
                <a href="#new4" onclick="toggleBlocks('4')">
                    <div class="fa fa-gamepad"></div>
                    <h1 id="color4" class="common">小游戏</h1>
                </a>
                <hr size="3" width="auto">
            </nav>
        </aside>

        <!-- <aside class="right_box">
            <p>右侧边栏</p>
        </aside> -->

        <section id="middle_box" class="middle_box">
            <!-- HTML5一栏设定 -->
            <ul id="new1" class="container">
                <iframe id="my-iframe" class="my-iframe switch_block selected" src="HTML5课堂文件/HTML5_Raw.html" frameborder="10px solid" scrolling="0"></iframe>
                <!-- 内部网页，scolling为轮滑条 -->
            </ul>
            <!-- 音乐一栏设定 -->
            <ul id="new2" class="container" style="display: none;">
                <iframe id="my-iframe" class="my-iframe switch_block" src="音乐/music.html" frameborder="10px solid" scrolling="0"></iframe>
            </ul>
            <!-- 有趣的网页一栏设定 -->
            <ul id="new3" class="container" style="display: none;">
                <iframe id="my-iframe" class="my-iframe switch_block" src="有趣的网页.html" frameborder="10px solid" scrolling="0"></iframe>
            </ul>
            <!-- 小游戏一栏设定 -->
            <ul id="new4" class="container" style="display: none;">
                <iframe id="my-iframe" class="my-iframe switch_block" src="Game/Game.html" frameborder="10px solid" scrolling="0"></iframe>
            </ul>
        </section>
    </div>

    <footer>
        @WYH
    </footer>

    <!-- 时钟方面的代码 -->
    <script src="NoBackGroundMain链接文件/时钟方面的代码.js"></script>

    <!-- iframe页面切换 -->
    <script src="NoBackGroundMain链接文件/iframe页面切换.js"></script>

    <!-- 屏幕分辨率大小兼容控制JS -->
    <script src="NoBackGroundMain链接文件/屏幕分辨率大小兼容控制.js"></script>

</body>

</html>